<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <link rel="stylesheet" href="css/swiper-4.2.0.min.css" type="text/css">
  <link rel="stylesheet" href="css/animate.min.css" type="text/css">
  <style type="text/css">
    /*  swiper4API  http://www.swiper.com.cn/api/index.html
        animate文档   http://www.swiper.com.cn/usage/animate/index.html
     */

    .swiper-container {
      margin: 0 auto;
      width: 800px;
      height: 330px;
      border: 1px solid blue;

    }

    .img {
      width: 100%;
      height: 100%;
    }

  </style>
</head>
<body>
<div class="swiper-container">
  <!-- 主体部分 swiper-slide里放需要轮播的东西-->
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <!--swiper-animate-effect   切换效果，例如 fadeInUp
          swiper-animate-duration 可选，动画持续时间（单位秒），例如 0.5s
          swiper-animate-delay    可选，动画延迟时间（单位秒），例如 0.3s
      -->
      <img src="images/bannerbg1.jpg" class="img ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s"
           swiper-animate-delay="0.3s">
    </div>
    <div class="swiper-slide">
      <img src="images/bannerbg2.jpg" class="img">
    </div>
    <div class="swiper-slide">
      <img src="images/bannerbg3.jpg" class="img">
    </div>
  </div>

  <!-- 分页器(焦点)-->
  <div class="swiper-pagination"></div>

  <!-- 导航(前进后退)按钮 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- 滚动条 -->
  <div class="swiper-scrollbar"></div>
  <div></div>
</div>

<script src="js/swiper-4.2.0.min.js"></script>
<script src="js/swiper.animate1.0.3.min.js"></script>
<script>
  var mySwiper = new Swiper('.swiper-container', {
//        direction: 'vertical',        //纵向滑动
    loop: true,  //后复制若干个slide(默认一个)并在合适的时候切换
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',//使用分页导航
      clickable: true,    //设置为true时，点击指示点会切换
    },

    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },

    //初始化时隐藏元素并在需要的时刻开始动画
    on: {
      init: function () {
        swiperAnimateCache(this); //隐藏动画元素
        swiperAnimate(this); //初始化完成开始动画
      },
      slideChangeTransitionEnd: function () {
        swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
      }
    }
  })
</script>
</body>
</html>